<!DOCTYPE html>
<html>
<head>
    <title>{$title}</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">

    <!-- import CSS -->
    <link rel="stylesheet" href="{$Think.config.site.resource_url}css/assets/style.css?1">
    <script src="{$Think.config.site.resource_url}js/assets/jquery.js"></script>

    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.4/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="{$Think.config.site.resource_url}js/assets/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>传递事件参数</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }

        #container {
            min-width: 403px;
            min-height: 467px;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
    <script>
        var searchService, markers = [];
        var init = function () {
            var map = new qq.maps.Map(document.getElementById("container"), {
                center: new qq.maps.LatLng(24.465901, 118.118820),
                zoom: 13
            });
            //绑定单击事件添加参数
            qq.maps.event.addListener(map, 'click', function (event) {
                //alert('您点击的位置为: [' + event.latLng.getLat() + ', ' +
                //    event.latLng.getLng() + ']');
                $('#longitude').val(event.latLng.getLng());
                $('#latitude').val(event.latLng.getLat());
            });

            //设置Poi检索服务，用于本地检索、周边检索
            searchService = new qq.maps.SearchService({
                //检索成功的回调函数
                complete: function (results) {
                    //设置回调函数参数
                    var pois = results.detail.pois;
                    var infoWin = new qq.maps.InfoWindow({
                        map: map
                    });
                    var latlngBounds = new qq.maps.LatLngBounds();
                    for (var i = 0, l = pois.length; i < l; i++) {
                        var poi = pois[i];
                        //扩展边界范围，用来包含搜索到的Poi点
                        latlngBounds.extend(poi.latLng);

                        (function (n) {
                            var marker = new qq.maps.Marker({
                                map: map
                            });
                            marker.setPosition(pois[n].latLng);

                            marker.setTitle(i + 1);
                            markers.push(marker);


                            qq.maps.event.addListener(marker, 'click', function () {
                                infoWin.open();
                                infoWin.setContent('<div style="width:280px;height:100px;">' + 'POI的ID为：' +
                                    pois[n].id + '，POI的名称为：' + pois[n].name + '，POI的地址为：' + pois[n].address + '，POI的类型为：' + pois[n].type + '</div>');
                                infoWin.setPosition(pois[n].latLng);
                            });
                        })(i);
                    }
                    //调整地图视野
                    map.fitBounds(latlngBounds);
                },
                //若服务请求失败，则运行以下函数
                error: function () {
                    alert("出错了。");
                }
            });
        }

        //清除地图上的marker
        function clearOverlays(overlays) {
            var overlay;
            while (overlay = overlays.pop()) {
                overlay.setMap(null);
            }
        }
        //设置搜索的范围和关键字等属性
        function searchKeyword() {
            var keyword = document.getElementById("keyword").value;

            clearOverlays(markers);
            //根据输入的关键字在搜索范围内检索
            searchService.search(keyword);
            //根据输入的关键字在圆形范围内检索
            //var region = new qq.maps.LatLng(39.916527,116.397128);
            //searchService.searchNearBy(keyword, region , 2000);
            //根据输入的关键字在矩形范围内检索
            //region = new qq.maps.LatLngBounds(new qq.maps.LatLng(39.936273,116.440043),new qq.maps.LatLng(39.896775,116.354212));
            //searchService.searchInBounds(keyword, region);
        }

    </script>
    <script src="{$Think.config.site.resource_url}js/assets/alert.js"></script>
    <link rel="stylesheet" href="{$Think.config.site.resource_url}css/assets/alert.css">
    
<script>
       $(function () {
            /*时间选择*/
            var Main = {
                data() {
                    return {
                        startTime: "",
                        endTime: ""
                    };
                }
            }
            var Ctor = Vue.extend(Main);
            new Ctor().$mount('#time');
    
            /*图片上传*/
            var pain = {
                data() {
                    return {
                        fileList2: []
                        // fileList2: [{name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
                    };
                },
                methods: {
                    handleRemove(file, fileList) {
                        console.log(file, fileList);
                    },
                    handlePreview(file) {
                        console.log(file);
                    },
                    handleSuccess(response, file, fileList) {
                        var data = [];
                        for( var i = 0; i < fileList.length; i++){
                            data[i] = fileList[i].response.url;
                        }
                        data = data.join(',');
                        $('#picture').val(data);
                    }
                }
            };
            var ptor = Vue.extend(pain)
            //var fileList = Main.data.fileList2;
            //console.log(Ctor.data);
            new ptor().$mount('#app')



           $('#cancel').click(function(){
               window.location.href="/home/Seller/index";
           });

            $('#show_map').click(function(){
                val = $(this).attr('data-val');
                if(val == "show"){
                    $(this).attr('data-val','hide');
                    $('#container').show();
                    $('#search_map').show();
                    init();
                }else{
                    $(this).attr('data-val','show');
                    $('#container').hide();
                    $('#search_map').hide();
                }
            });
    
            $('.province').change(function(){
                val = $(this).val();
                $("[id^=city_]").hide();
                $("[id^=city_]").attr("name","");
                $('#city_'+val).attr("name","city");
                $('#city_'+val).show();
            });
        });
        function backFunc(data) {
                if(data.res == 1) {
                    alert_success(data.msg);
                    setTimeout(function(){window.location.href="/home/seller/index";}, 1000);
                }else{
                    alert_fail(data.msg);
                }
            }

</script>
    
</head>

<body>
<!-- 顶部 -->
<div class="head">
    <div class="head_back"><a href="/home/Seller/index"><img src="{$Think.config.site.resource_url}images/assets/arrow.png"></a></div>
    <div class="head_txt">添加商户</div>
</div>


<div class="store_main">
    <div class="binding_main">
        <iframe src="" frameborder="0" name="add_form_iframe" style="display: none"></iframe>
        <form action="/home/Seller/addSeller" id="form" target="add_form_iframe" method="post">
            <input type="hidden" name="callback" value="backFunc">
            <input type="hidden" name="picture" value="" id="picture">
            <div class="binding_tit">商户名称：</div>
            <div class="binding_select"><input name="name" value="" placeholder="请输入商户名称"></div>

            <div class="binding_tit">状态：</div>
            <div class="binding_select">
                <select name="status" id="">
                    <option value="1">正常</option>
                    <option value="2">异常</option>
                </select>
            </div>

            <div class="binding_tit">绑定登录手机号：</div>
            <div class="binding_select"><input name="mobile" value="" placeholder="请输入绑定登录手机号"></div>
            <div class="binding_tit">商户地址：</div>
            <div class="binding_select">
                <select id="s_province" class="province" name="province">
                    <option value="">{:lang('选择省份')}</option>
                    {volist name="province" id="vo"}
                    <option value="{$vo.addr_id}">{$vo.addr_name}</option>
                    {/volist}
                </select>

                </label><?php foreach($city as $province_id=>$val){  ?>
                <label>
                    <select  class="city" name="s_city"  style="display:none;" data-placeholder="选择城市......" class="city" id='city_<?php echo $province_id;?>' name="" style="width:150px;" tabindex="2">
                        <option value="">{:lang('选择城市')}</option><?php foreach($val as $v){ ?>
                        <option value="{$v.addr_id}" hassubinfo="true"><?php echo $v['addr_name'] ?></option><?php }?>
                    </select>
                </label><?php }?>
            </div>
            <div class="binding_select"><input value="" name="addr" placeholder="请输入详细地址"></div>
            <div class="binding_tit">设置单价：<label style="color: red">设置单价价格，单位（小时）</label></div>
            <div class="binding_select"><input name="per_price" value="" placeholder="请输入单价"></div>
            <div class="binding_tit">佣金比例：<label style="color: red">请输入分成给商户比例，必须大于1并小于100的整数,单位%</label></div>
            <div class="binding_select"><input name="brokerage" value="" placeholder="请输入佣金比例"></div>
            <div class="binding_tit">门店图片：</div>
            <div class="binding_select" id="app" style="height: auto;">
                <el-upload name="img_file" value="fileList2" class="upload-demo" action="/home/Seller/fileUpload" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :file-list="fileList2" list-type="picture">
                    <el-button size="small" type="primary" class="fl">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip load_notice">只能上传jpg/png文件，且不超过2M</div>
                </el-upload>
            </div>
            <div class="binding_tit">营业时间：</div>
            <div class="binding_select" id="time">
                <template>
                    <el-time-select name="shopstart" class="begin_time" placeholder="起始时间" v-model="startTime" :picker-options="{
					  start: '00:00',
                    step: '00:30',
                    end: '24:00'
                    }">
                    </el-time-select>
                    <el-time-select name="shopend" class="end_time" placeholder="结束时间" v-model="endTime" :picker-options="{
					  start: '00:00',
                    step: '00:30',
                    end: '24:00',
                    }">
                    </el-time-select>
                </template>
            </div>
            <div class="binding_tit">归属地推</div>
            <div class="binding_select">
                <select name="salesman">
                    <option value="">请选择归属地推</option>
                    {foreach name="sale" item="v"}
                    <option value="{$v.id}">{$v.real_name}</option>
                    {/foreach}
                </select>
            </div>
            <div class="binding_tit">门店电话：</div>
            <div class="binding_select"><input name="phone" value="" placeholder="请输入门店电话"></div>

            <label class="col-sm-5 control-label">地图定位</label>
            <div class="col-sm-7">
                <div class="binding_btn">
                    <input type="button" class="form-control" data-val="show" id="show_map" style="width:80px;height:35px;border: 1px;margin-top: 5px;" value="显示地图">
                </div>
                <div id="search_map" style="display:none; margin-bottom: 5px;">
                    <input id="keyword" type="textbox" value="北京" style="border-width: 1px;height: 20px;">
                    <input type="button" value="搜索" onclick="searchKeyword()" style="border: 1px;padding: 5px 10px; margin-left: 10px;">
                </div>
            </div>
            <div class="col-sm-7">
                <div id="container" style="display:none;">

                </div>
            </div>

            <div class="binding_tit">经度</div>
            <div class="binding_select"><input type="text" class="form-control" id="longitude" name="longitude" value="" placeholder="输入经度"></div>

            <div class="binding_tit">纬度</div>
            <div class="binding_select"><input type="text" class="form-control" id="latitude" name="latitude" value="" placeholder="输入纬度"></div>

            <div class="binding_btn">
                <button class="state_confirm">确认</button>
                <button type="reset" id="cancel">取消</button>
            </div>
        </form>
    </div>
</div>

